<template>
  <div class="home">
    <div class="Home_text">Sizes:</div>
    <div class="Home_text" @click="click('cart')">进入购物车</div>
    <div class="time_container">
      <div v-for="(item,index) in data" :key="index" @click="onClick(item)">
        {{item.title}}
      </div>
    
    </div>
    <div class="home_zimu_list">Leave a star on Github if this repository was useful:)</div>
    <div class="home_zimu_list_top">
      <button @click="onchange">★Star</button>
      <button class="container">741</button>
    </div>
    <div class="home_checkbox">16 Product(s) found.</div>
    <div class="home_list_top">
      <div v-for="(item,index) in showList" :key="index" class="home_title_list" @click="nav(item)">
        <div>
          <img :src="item.mainPic" alt />
        </div>

        <div>{{item.title}}</div>
        <div class="home_cart">
          <div style="color:red">￥{{item.originalPrice}}</div>
          <div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  components: {},
  data() {
    return {
      list: [],
      data:[{title:"XS",size:"258.4"},
      {title:"S",size:"39.9"},
      {title:"M",size:"19.9"},
      {title:"ML",size:"258.4"},
      {title:"L",size:"19.9"},
      {title:"XL",size:"29.9"},
      {title:"XXL",size:"39.9"}],
      sort: true,
      sel: "cart",
      opon: "list",
      showList:[],
    };
  },
  methods: {
    onClick(item){
      console.log(item.size)
      console.log(this.list)
      this.showList=[]
      this.list.forEach((ele)=>{
        if(item.size==ele.actualPrice){
          this.showList.push(ele)
        }
      })
        console.log(this.showList)

    },
    nav(item) {
      this.$router.push({
        name: "list",
        params: {
          items: item
        }
      });
    },
    click(s) {
      this.sel = s;
      if (s == "cart") {
        this.$router.history.push({
          name: "Cart"
        });
      }
    },
    onchange() {
      this.sort = !this.sort;
      this.showList.sort((a, b) => {
        return this.sort
          ? a.originalPrice - b.originalPrice
          : b.originalPrice - a.originalPrice;
      });
    }
  },
  mounted() {
    axios.get("http://localhost:8080/goodsList.json").then(resp => {
      this.list = resp.data.result.data.list;
      this.showList = this.list
      window.console.log(this.list);
    });
  }
};
</script>

<style scoped>
.time_container {
  width: 100%;
  height: 64px;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.time_container div {
  height: 40px;
  width: 40px;
  background-color: #ececec;
  text-align: center;
  line-height: 40px;
  border-radius: 50px;
  font-size: 16px;
}
.container{
  border: 0px;
  margin-left: 5px;
  margin-top: 10px;
}
.Home_text {
  color: red;
  font-size: 20px;
  text-align: center;
  width: 100%;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 5px;
}
.home_zimu_list {
  width: 100%;
  color: gray;
  margin-top: 10px;
  font-size: 15px;
  text-align: center;
}
.home_zimu_list_top {
  text-align: center;
  height: 50px;
  margin-top: 5px;
}
.home_zimu_list_top button {
  height: 35px;
  width: 80px;
  font-weight: 600;
}
.home_checkbox {
  text-align: center;
  margin-top: 5px;
}
.home_title_list img {
  width: 100%;
}
.home_title_list {
  width: 48%;
}
.home_list_top {
  width: 100%;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}
.home_cart {
  width: 100%;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
}
.home_cart button {
  background-color: red;
  border: 0px;
  height: 35px;
  color: white;
  border-radius: 5px;
}
</style>
